import React, { PureComponent, Fragment } from 'react';
import { Table, Input, InputNumber, Popconfirm, Form, Button, Tooltip } from 'antd';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';

const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  getInput = () => {
    return <Input />;
  };

  render() {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      max,
      min,
      step,
      ...restProps
    } = this.props;
    return (
      <EditableContext.Consumer>
        {form => {
          const { getFieldDecorator } = form;
          return (
            <td {...restProps}>
              {editing ? (
                <FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(dataIndex, {
                    rules: [
                      {
                        required: true,
                        message: formatMessage({ id: 'app.tools.pleaseInput' }) + `${title}!`,
                      },
                    ],
                    initialValue: record[dataIndex],
                  })(this.getInput())}
                </FormItem>
              ) : (
                restProps.children
              )}
            </td>
          );
        }}
      </EditableContext.Consumer>
    );
  }
}

@connect(({ produce }) => ({ produce }))
class ProdBoardDataForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editingKey: '' };
    this.columns = [
      {
        title: '板编号',
        dataIndex: 'boardIndex',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '1',
      },
      {
        title: '识别第一块',
        dataIndex: 'firstLen',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '2',
      },
      {
        title: '识别第二块',
        dataIndex: 'secLen',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '3',
      },
      {
        title: '起点角度',
        dataIndex: 'beginAngle',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '4',
      },
      {
        title: '终点前角',
        dataIndex: 'finalFrontAngle',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '5',
      },
      {
        title: '终点后角',
        dataIndex: 'finalBackAngle',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '6',
      },
      {
        title: '终点第一块',
        dataIndex: 'finalFirstLen',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '7',
      },
      {
        title: '终点第二块',
        dataIndex: 'finalSecLen',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '8',
      },
      {
        title: '第一块误差',
        dataIndex: 'finalFirstError',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '9',
      },
      {
        title: '第二块误差',
        dataIndex: 'finalSecondError',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '10',
      },
      {
        title: '总长误差',
        dataIndex: 'finalTotalError',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '11',
      },
      {
        title: '分板方式',
        dataIndex: 'isAuto',
        editable: false,
        width: '8.333%',
        inputType: 'string',
        key: '12',
      },
    ];
  }
  isEditing = record => record.key === this.state.editingKey;

  cancel = () => {
    this.setState({ editingKey: '' });
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/getWorkingInfo',
    });
  };
  save(form, key) {
    const { dispatch } = this.props;
    form.validateFields((error, row) => {
      console.log('row', row);
      if (error) {
        return;
      }
      const newData = { ...row, key: '1' };
      this.edit('');
      dispatch({
        type: 'produce/saveWorkingInfo',
        payload: newData,
      });
    });
  }

  edit(key) {
    this.setState({ editingKey: key });
  }

  render() {
    const { prodBoardData } = this.props.produce;
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };

    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.inputType,
          dataIndex: col.dataIndex,
          max: col.max,
          min: col.min,
          step: col.step,
          title: col.title,
          editing: this.isEditing(record),
        }),
      };
    });

    return (
      <Fragment>
        <Table
          bordered
          components={components}
          dataSource={prodBoardData}
          columns={columns}
          rowClassName="editable-row"
          size={'small'}
          pagination={{ pageSize: 8 }}
        />
      </Fragment>
    );
  }
}

export default ProdBoardDataForm;
